<template>
  <div class="OrderList">
    <!--导航栏-->
    <van-nav-bar :title="getLabel" left-arrow @click-left="$router.go(-1)"/>

    <!--没有订单时候-->
    <div class="OrderNUll" v-if="orderList!==null&&orderList.length===0">
      <img :src='require("./../../assets/Images/custom-empty-image.png")' alt="加载失败" class="custom-image"/>
      <p class="orderNull_content">没有订单</p>
    </div>

    <!-- 有订单-->
    <div class="OrderList-main" v-else>
      <div class="order-item" v-for="(item,index) in orderList" :key="index">
        <div class="order-item-title">
          <van-icon name="shop-o" class="shop-icon"/>
          <span class="title-content">天天书店</span>
          <span class="title-right">{{ getLabel }}</span>
        </div>
        <van-card class="order-card" :num="item.count" @click="clickDetail(item.orderId)"
                  :price="item.salePrice" :desc="item.description" :title="item.name"
                  :thumb="item.imageUrl"/>
        <div class="footerBtn">
          <van-button size="normal" class="footer-button" @click="deleteOrder(item.orderId,item.id)"
                      v-if='type==="0"||type==="2" ||type==="3"||type==="4"'>删除
          </van-button>
          <van-button size="normal" class="footer-button" v-if='type==="0"||type==="1"||type==="2"'>修改地址
          </van-button>
          <van-button size="normal" class="footer-button" v-if='type==="0"'>帮我付</van-button>
          <van-button size="normal" class="footer-button footer-button-color" v-if='type==="0"'
                      @click="payment(item.orderId)">付款
          </van-button>
          <van-button size="normal" class="footer-button footer-button-color" v-if='type==="3"||type==="4"'
                      @click="getLogisticsInformation(item.orderId)">物流信息
          </van-button>
          <van-button size="normal" class="footer-button footer-button-color"
                      v-if='type==="3"||type==="4"' @click="submitOrderComplete(item.orderId);">确认收货
          </van-button>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "OrderList",

  inject: ["reload"],

  data() {
    return {
      type: this.$route.query.type,
      orderList: null,
    }
  },

  created() {
    this.getOrderList();
  },

  computed: {
    // 获取label的数据
    getLabel() {
      let label = "";
      switch (this.type) {
        case "0":
          label = "待付款";
          break;
        case "2":
          label = "待发货";
          break;
        case "3":
          label = "已发货";
          break;
        case "4":
          label = "待收货";
          break;
      }
      return label;
    },
  },

  methods: {
    // 获取相关数据
    async getOrderList() {
      let params = {
        type: this.type,
        userId: this.$store.getters.user.userId,
      };
      let res = await this.$axios.post(this.$api.getOrderList, params);
      if (res.status === 200 && res.data.code === 200) {
        this.orderList = this.filterArray(res.data.data);
      } else {
        this.$toast(res.data.message);
      }
    },

    //删除订单
    async deleteOrder(orderId) {
      let res = await this.$axios.post(this.$api.deleteOrder, {orderId});
      if (res.status === 200 && res.data.code === 200) {
        this.$toast("删除成功");
        this.reload();
      }
    },

    //点击详情
    clickDetail(orderId) {
      this.$router.push({path: "/orderDetail", query: {orderId}});
    },

    //付款功能
    payment(id) {
      setTimeout(() => {
        this.$router.push({path: "/safe/validPayPwd", query: {orderId: id}});
      }, 500)
    },

    //确认收货的逻辑
    async submitOrderComplete(orderId) {
      let res = await this.$axios.post(this.$api.submitOrderComplete, {
        orderId: orderId,
        userId: this.$store.getters.user.userId
      });

      if (res.status === 200 && res.data.code === 200) {
        this.$toast.success("收货成功");
        this.reload();
      }
    },

    //跳转到物流信息界面
    getLogisticsInformation(orderId) {
      this.$router.push({path: '/logisticsInformation', query: {orderId: orderId}});
    },

    // 格式化数据
    filterArray(data) {
      let newData = data;
      if (data.length <= 0) {
        return newData = [];
      }
      for (let i = 0; i < newData.length; i++) {
        // 获取原来的数据
        newData[i].salePrice = newData[i].salePrice.toFixed(2)
      }
      return newData;
    }
  },
}
</script>

<style lang="less" scoped>
.OrderList {
  background-color: #fff;
  height: auto;
  padding-bottom: 20%;

  .OrderNUll {
    margin-top: 45%;

    .custom-image {
      width: 5rem;
      margin-left: 50%;
      transform: translateX(-50%);
    }

    .orderNull_content {
      text-align: center;
      font-size: .6rem;
    }
  }

  .OrderList-main {
    padding: .4rem .5rem;

    .order-item {
      border-radius: 7px;
      overflow: hidden;
      margin-bottom: 1rem;
      box-shadow: 0 0 10px #eee;
      padding: .2rem;

      .order-item-title {
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 14px;

        .shop-icon {
          vertical-align: middle;
          margin-left: 7px;
          margin-right: 3px;
        }

        .title-content {
          vertical-align: middle;
        }

        .title-right {
          float: right;
          margin-right: 1rem;
          color: #F98510;
          font-size: 12px;
        }
      }

      .order-card {
        background-color: #fff;
        padding: 5px;
        margin: 0;
      }

      .footerBtn {
        text-align: right;
        padding: 10px 10px 5px 0px;

        .footer-button {
          height: 30px;
          padding: 12px;
          border-radius: 10px;
          margin-left: 5px;
        }

        .footer-button-color {
          color: #F98510;
          border-color: #F98510;
        }
      }
    }
  }


  .content {
    margin-top: 50%;
    text-align: center;
  }

}
</style>